<template>
  <section class="stats-list" v-loading="loading">
    <div class="item" v-for="(item, index) in list" :key="index" :id="'stats' + item.month" :class="{ active: item.month === active }" @click="$emit('change-month', item.month)">
      <div class="subtitle">{{ item.month }}月</div>
      <div class="tr th">
        <span class="empty" style="width: 60%" />
        <span>集团</span>
        <span>集群</span>
        <span>事业部</span>
      </div>
      <el-table :data="item.list" border :span-method="objectSpanMethod" size="mini" class="stats-table">
        <el-table-column prop="checkType" label="检查类别" align="center" width="60px" />
        <el-table-column prop="checkTable" label="工序" align="center" width="60px" />
        <el-table-column prop="name" label="检查项" align="center" width="60px" />
        <el-table-column label="集团" align="center" width="60px">
          <div slot-scope="{ row }">
            <span v-if="!(row.dep1Scores || []).length">/</span>
            <div v-else>
              <div class="score" v-for="(stat, index2) in row.dep1Scores" :key="index2" :class="stat.level | scoreClass">{{ stat.score }}</div>
            </div>
          </div>
        </el-table-column>
        <el-table-column label="集群" align="center" width="60px">
          <div slot-scope="{ row }">
            <span v-if="!(row.dep2Scores || []).length">/</span>
            <div v-else>
              <div class="score" v-for="(stat, index2) in row.dep2Scores" :key="index2" :class="stat.level | scoreClass">{{ stat.score }}</div>
            </div>
          </div>
        </el-table-column>
        <el-table-column label="事业部" align="center" width="60px">
          <div slot-scope="{ row }">
            <span v-if="!(row.dep3Scores || []).length">/</span>
            <div v-else>
              <div class="score" v-for="(stat, index2) in row.dep3Scores" :key="index2" :class="stat.level | scoreClass">{{ stat.score }}</div>
            </div>
          </div>
        </el-table-column>
      </el-table>
    </div>
  </section>
</template>
<script>
// 项目得分详情
import { getScoreDetail } from '@/api/qualityManage/cq'
const statsTable = [
  { id: 1, name: '防渗漏', key: 'tjfsl', checkType: '过程检查', checkTable: '土建过程' },
  { id: 2, name: '质量', key: 'tjzl' },
  { id: 3, name: '安全', key: 'tjaq' },
  { id: 4, name: '文明', key: 'tjwm' },
  { id: 5, name: '防渗漏', key: 'jzfsl', checkTable: '精装过程' },
  { id: 6, name: '质量', key: 'jzzl' },
  { id: 7, name: '安全文明', key: 'jzaqwm' },
  { id: 8, name: '管理动作', key: 'tjgldz', checkTable: '管理动作' },
  { id: 9, name: '结构安全', key: 'jgaq', checkTable: '"结构安全' },
  { id: 10, name: '材料管理', key: 'clgl', checkTable: '材料管理' },
  { id: 11, name: '承诺一致性', key: 'jf_cnyzx', checkType: '交付检查' },
  { id: 12, name: '产品舒适度', key: 'jf_cpssd' },
  { id: 13, name: '外部验收及进度', key: 'jf_wbysjjd' },
  { id: 14, name: '外立面观感', key: 'jf_wlmgg' },
  { id: 15, name: '一房一验', key: 'jf_yfyy' },
  { id: 16, name: '承接查验', key: 'jf_cjcy' },
  { id: 17, name: '防渗漏', key: 'jf_fsl' },
  { id: 18, name: '观感', key: 'jf_gg' },
  { id: 19, name: '空鼓/开裂', key: 'jf_kgkl' },
  { id: 20, name: '防渗漏专项样板', key: 'yb_fslzxyb', checkType: '样板验收' },
  { id: 21, name: '土建楼层会验', key: 'yb_tjlchy' },
  { id: 22, name: '精装工法样板验收', key: 'yb_jzgfybys' },
  { id: 23, name: '交付样板验收', key: 'yb_zfybys' }
]
export default {
  name: 'ScoreDetail',
  filters: {
    scoreClass(val) {
      if (!val) return ''
      if (val === 'A' || val >= 90) return 'green'
      if (val === 'B' || (val < 90 && val >= 80)) return 'blue'
      if (val === 'C' || val < 80) return 'red'
      return ''
    }
  },
  props: {
    queryParams: { type: Object, default: () => ({ projectId: '', inputYear: new Date().getFullYear() + '' }) },
    active: { type: [Number, String], default: '' }
  },
  data() {
    return {
      loading: false,
      list: []
    }
  },
  methods: {
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) return { rowspan: 10, colspan: 1 }
        if (rowIndex === 10) return { rowspan: 9, colspan: 1 }
        if (rowIndex === 19) return { rowspan: 4, colspan: 1 }
        return { rowspan: 0, colspan: 0 }
      }
      if (columnIndex === 1) {
        if (rowIndex === 0) return { rowspan: 4, colspan: 1 }
        if (rowIndex === 4) return { rowspan: 3, colspan: 1 }
        return { rowspan: 0, colspan: 0 }
      }
      if (columnIndex === 2) {
        if (rowIndex >= 7) return { rowspan: 1, colspan: 2 }
      }
    },
    reset() {
      this.loading = false
      this.list = []
    },
    async getList() {
      this.loading = true
      const res = await getScoreDetail(this.queryParams).catch(() => false)
      this.loading = false
      if (res === false) return (this.list = [])
      const data = res.data || []

      // 将同个月份的集团/集群/事业部 聚合到同项
      const obj = {}
      data.map(i => {
        const month = i.checkMonth
        const randomType = i.randomType
        const item = obj[month] || { list: JSON.parse(JSON.stringify(statsTable)) }
        // 去除年份，和月份前缀0
        if (!item.month) item.month = +month.substring(4)

        item.list.map(j => {
          const val = i[j.key]
          let scores = []
          if (val) {
            scores = val
              .split('/')
              .filter(i => i)
              .map(str => ({ level: str.charAt(0), score: str }))
          }
          j[`dep${randomType}Scores`] = scores
        })
        obj[month] = item
      })
      this.list = Object.values(obj)
    }
  }
}
</script>
<style lang="scss" scoped>
.stats-list {
  width: 100%;
  min-height: 300px;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  transition: all 0.4s ease;
  .item {
    position: relative;
    width: 401px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(#000, 0.01);
    font-size: 12px;
    color: #606266;
    margin: 0 20px 20px 0;
    cursor: pointer;
    transition: 0.3s;
    &:hover {
      box-shadow: 0 2px 12px rgba(#000, 0.1);
    }
    &.active {
      width: 403px;
      border: 1px solid #67c23a;
    }
  }
  .subtitle {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-image: linear-gradient(to right, #2ce6c9, #00baff);
    color: white;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 9px 0 10px 0;
  }
  .tr {
    display: flex;
    padding: 1px 0;
    span {
      &:first-child {
        width: 40%;
        color: #373839;
        &:not(.empty)::before {
          content: '●';
          color: #cddafc;
          margin-right: 3px;
        }
      }
      &:not(:first-child) {
        width: 20%;
        text-align: center;
      }
    }
  }
  .th {
    color: #515a6e;
    font-weight: bold;
    pointer-events: none;
  }
}
.stats-table.el-table--mini /deep/ {
  th,
  td {
    padding: 0;
  }
  .el-table__header-wrapper {
    display: none;
  }
  .el-table__body tr:hover > td {
    background-color: transparent;
  }
  .cell {
    padding: 2px 0;
  }
}
.score {
  line-height: 14px;
  white-space: nowrap;
}
.green {
  color: #67c23a;
}
.blue {
  color: #409eff;
}
.red {
  color: #f56c6c;
}
</style>
